<template>
  <div class="apply-page">
    <div v-if="loading" class="loading-container">
      <n-spin size="large" />
      <p>正在加载...</p>
    </div>

    <div v-else-if="error" class="error-container">
      <n-result status="error" title="链接无效" :description="errorMessage">
        <template #footer>
          <n-button type="primary" round @click="handleRetry"> 重试 </n-button>
        </template>
      </n-result>
    </div>

    <div v-else-if="success" class="success-container">
      <n-result status="success" title="提交成功" description="您的简历信息已成功提交！">
        <template #footer>
          <n-button type="primary" round @click="handleClose"> 关闭页面 </n-button>
        </template>
      </n-result>
    </div>

    <div v-else class="form-container">
      <div class="form-header">
        <div class="logo-container">
          <img src="../../assets/images/logo.jpg" alt="Logo" class="logo breathing-animation" />
        </div>
        <h1>🎉 欢迎选择加入伍月 🎉</h1>
        <p>请认真填写您的个人信息</p>
      </div>

      <applicant-form :link-token="token" @submit-success="handleSubmitSuccess" :res-data="resData" />

      <div class="form-footer">
        <p>© {{ new Date().getFullYear() }} 伍月 - 所有权利保留</p>
      </div>

      <div class="form-decoration">
        <div class="decoration-item decoration-1"></div>
        <div class="decoration-item decoration-2"></div>
        <div class="decoration-item decoration-3"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useMessage } from 'naive-ui';
import ApplicantForm from '../../components/ApplicantForm.vue';
import applicantApi from '../../api/applicant';

const route = useRoute();
const message = useMessage();

const token = ref('');
const loading = ref(true);
const error = ref(false);
const success = ref(false);
const errorMessage = ref('');
const resData = ref({});

// 验证链接
const validateLink = async () => {
  loading.value = true;
  error.value = false;

  try {
    token.value = route.params.token;
    if (!token.value) {
      throw new Error('链接无效');
    }

    const res = await applicantApi.validateLink(token.value);
    if (res.success) {
      resData.value = res.data;
    } else {
      throw new Error('链接已过期或不存在');
    }
  } catch (err) {
    console.error('验证链接失败:', err);
    error.value = true;
    errorMessage.value = err.response?.data?.message || '链接已过期或不存在';
  } finally {
    loading.value = false;
  }
};

// 提交成功处理
const handleSubmitSuccess = () => {
  success.value = true;
};

// 重试
const handleRetry = () => {
  validateLink();
};

// 关闭页面
const handleClose = () => {
  window.close();
};

onMounted(() => {
  validateLink();
});
</script>

<style scoped>
.apply-page {
  min-height: 100vh;
  background-color: #fff9fb;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}

.loading-container,
.error-container,
.success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}

.loading-container p {
  margin-top: 20px;
  color: #666;
}

.form-container {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 30px 30px 50px;
}

.form-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ffecf1;
}

.logo-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.form-header .logo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border: 3px solid #fff;
  transition: transform 0.3s ease;
}

.form-header .logo:hover {
  transform: scale(1.05);
}

.form-header h1 {
  color: #ff85a2;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 28px;
}

.form-header p {
  color: #888;
  font-size: 16px;
}

.form-footer {
  text-align: center;
  margin-top: 40px;
  color: #999;
  font-size: 14px;
}

.form-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.decoration-item {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
  filter: blur(40px);
}

.decoration-1 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #ff85a2, #ffb8c6);
  top: -150px;
  left: -150px;
}

.decoration-2 {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #ffb8c6, #ffd6e0);
  top: 30%;
  right: -100px;
}

.decoration-3 {
  width: 250px;
  height: 250px;
  background: linear-gradient(135deg, #ffa5b8, #ffd1dc);
  bottom: -100px;
  left: 30%;
}

@media (max-width: 768px) {
  .apply-page {
    padding: 20px 10px;
  }

  .form-container {
    padding: 20px 15px 30px;
    border-radius: 8px;
  }

  .loading-container,
  .error-container,
  .success-container {
    padding: 30px 15px;
    border-radius: 8px;
  }

  .form-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
  }

  .form-header h1 {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .form-header p {
    font-size: 14px;
  }

  .form-header .logo {
    width: 60px;
    height: 60px;
  }

  .form-footer {
    margin-top: 30px;
    font-size: 12px;
  }

  .decoration-item {
    opacity: 0.3;
    filter: blur(30px);
  }

  .decoration-1 {
    width: 150px;
    height: 150px;
    top: -75px;
    left: -75px;
  }

  .decoration-2 {
    width: 100px;
    height: 100px;
  }

  .decoration-3 {
    width: 120px;
    height: 120px;
  }
}

/* 全局样式覆盖 */
:deep(.n-button--primary-type) {
  background-color: #ff85a2 !important;
  border-color: #ff85a2 !important;
}

:deep(.n-button--primary-type:hover) {
  background-color: #ff6b8e !important;
  border-color: #ff6b8e !important;
}

:deep(.n-result .n-result-icon.n-result-icon--success) {
  color: #ff85a2 !important;
}

:deep(.n-result .n-result-icon.n-result-icon--error) {
  color: #ff4d6d !important;
}

:deep(.n-spin-description) {
  color: #ff85a2 !important;
}

:deep(.n-spin-body) {
  color: #ff85a2 !important;
}

.breathing-animation {
  animation: breathe 3s infinite;
}

@keyframes breathe {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
</style>
